<template>
  <div class="bottom">
    <!-- 插槽   -->
    <slot></slot>
    <div class="bottom-main-header">
      <ul>
        <li v-for="(item,index) in data.navList" :class="index===data.num?'bottom-border':''" @click="bordeClick(index)">
          {{item.name}}
        </li>
      </ul>
    </div>
    <div v-show="data.list[data.num].length===0" class="bottom-main-content">
      <div>
        <img src="/images/personalCenter/noOrder.png">
        <p>暂无订单列表</p>
      </div>
    </div>
    <div class="orderForm">
      <ul>
        <li v-for="(item,index) in data.list[data.num]" :key="item">
          <div class="orderNumber">
            <router-link :to="{name:'LineItem',params:{orderNumber:item.orderNumber}}">
              订单编号： {{item.orderNumber}} | <span>订单详情 > </span>
            </router-link>
            <span>{{ item.status }}</span>
          </div>
          <div v-for="(val,i) in item.shop" class="commodityFigure">
            <div>
              <img :src="val.mainimage" alt="">
            </div>
            <div>
              <p class="commodityFigure-p commodityFigure-fontSize">{{val.title}}</p>
            </div>
            <div>
              <p class="commodityFigure-fontSize">X{{val.quantity}}</p>
            </div>
            <div>
              <p class="commodityFigure-fontSize">￥{{val.price}}</p>
            </div>
          </div>
          <div class="settleAccounts">
            <div>
              <span>￥{{item.allMoney}}</span>
            </div>
            <div v-if="item.status == '待付款'">
              <el-button @click="deactivePayment(index,item.orderNumber)">取消支付</el-button>
              <el-button @click="confirmPayment(index,item.orderNumber)">立即支付</el-button>
            </div>
            <div v-else-if="item.status == '待发货'">
              <el-button @click="remind" style="margin: 0">提醒发货</el-button>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!--弹窗-->
    <div class="mask" v-show="data.flag">
      <div class="mask-content">
        <div class="mask-content-body">
          <div class="rem">
            <h3>确定要取消该订单吗</h3>
            <div>
              <el-button @click="enThink">再想想</el-button>
              <el-button @click="enRemove">确定</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {reactive, onMounted, computed,getCurrentInstance,watch} from "vue";
import {ElMessage} from "element-plus";
import { useRouter } from "vue-router";
import store  from "../../../store";
const router = useRouter();
//proxy
const {proxy} = getCurrentInstance();
//数据
let data = reactive({
  flag:'',
  //删除订单编号
  orderod:'',
  //tab栏数据
  navList:[
    {name: '全部订单'},
    {name: '待付款'},
    {name: '待发货'},
    {name: '待收货'},
    {name: '已取消'}
  ],
  //点击的下标
  num:0,
  i:'',
  //订单数据
  list:[
      //全部订单
      [

      ],
      //待付款
      [

      ],
      //代发货
      [],
      //待收货
      [],
      //已取消
      []
  ]
})
//发送get请求
let orderGet = ()=>{
  proxy.$get('/api/PersonalCenter/order',{})
      .then((date)=>{
        let arr = [
          //全部订单
          [

          ],
          //待付款
          [

          ],
          //代发货
          [],
          //待收货
          [],
          //已取消
          []
        ]
        date.forEach((item)=>{
          let obj = {
            //状态
            status:'',
            //订单编号
            orderNumber:'',
            //商品
            shop:[],
            //总价
            allMoney:'',
            //时间
            paymenttime:''
          }
          obj.orderNumber = item.orderid;
          obj.shop = JSON.parse(item.products);
          obj.allMoney = item.payment;
          obj.paymenttime = item.paymenttime
          if (item.status==1){
            obj.status = '待付款';
          }else if (item.status==2){
            obj.status = '待发货';
          }else if (item.status==4){
            obj.status = '已取消';
          }
          arr[item.status].push(obj);
        })
        arr[0].push(...arr[1]);
        arr[0].push(...arr[2]);
        arr[0].push(...arr[4]);
        data.list = arr;
      })
}
//发送超时请求
let datePost = () => {
  proxy.$post('/api/PersonalCenter/order',{})
      .then((val)=>{
        // console.log(val);
      })
}
//挂载后
onMounted(()=>{
  datePost();
  orderGet();
})
let bordeClick = (index)=>{
  data.num = index
}
// 提醒发货
let remind = ()=>{
  ElMessage({
    message: '已催商家发货',
    type: 'success',
  })
}
// 取消支付
let deactivePayment = (index,orderid)=>{
  data.flag = true;
  data.i=index;
  data.orderid = orderid;
}
//确定支付
let confirmPayment = (index,orderid)=>{
  proxy.$post('/api/order/overtime',{id:orderid})
      .then((val)=>{
        if (val.code===200){
          data.i=index;
          sessionStorage.setItem('orderid',orderid);
          router.push('/cart/affirm');
        }else {
          ElMessage({
            type: 'warning',
            message: val.msg,
          })
          router.push('/');
        }
      })
}
//再想想
let enThink = ()=>{
  data.flag = false;
}
//确定
let enRemove = () =>{
  data.flag = false;
  //删除
  data.list[data.num].splice(data.i,1);
  //发送请求已取消
  proxy.$get('/api/PersonalCenter/order',{orderid:data.orderid,code:'cancel'})
      .then((date)=>{
        ElMessage({
          message: '已取消该订单',
          type: 'success',
        })
      })
  //取消发送请求
  setTimeout(()=>{
    orderGet();
  },100)
}
</script>

<style lang="less" scoped>
.bottom {
  box-shadow: 0 0 10px 0 #eaeaea;
  a {
    text-decoration: none;
  }
  .bottom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 55px;
    h3 {
      font-size: 20px;
      font-weight: 400;
    }
    a {
      color: #666;
      font-size: 14px;
    }
  }
  .mask {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.6);
    z-index: 999;
    //display: none;
    .mask-flag {
      //min-width: 440px!important;
    }
    .mask-content {
      max-width: 680px;
      min-width: 380px;
      padding: 40px 65px;
      position: absolute;
      left: 50%;
      top: 50%;
      background: #fff;
      border-radius: 2px;
      transform: translate(-50%,-50%);
      text-align: center;
      .mask-content-body {
        width: 100%;
        background: #fff;
        border-radius: 2px;
        text-align: center;
        font-size: 14px;
        .rem {
          box-sizing: border-box;
          //min-width: 440px;
          h3 {
            line-height: 24px;
            font-size: 18px;
            color: #303133;
          }
          div {
            display: flex;
            justify-content: space-between;
            .el-button {
              width: 164px;
              height: 40px;
            }
          }
        }
        div {
          position: relative;
          margin: 10px 0;
          .el-input {
            height: 50px;
          }
          h3 {
            padding: 0;
            margin-bottom: 40px;
            font-size: 22px;
          }
          .personalData-form-inp {
            .el-input {
              height: 50px;
            }
            input {
              width: 100%;
              height: 50px;
              padding: 0 25px;
              box-sizing: border-box;
              background-color: #fff;
              border-radius: 4px;
              border: 1px solid #dcdfe6;
            }
            .el-select {
              width: 165px;
              /deep/ .el-input__inner {
                height: 50px;
              }
            }
          }
          .el-form-item-inp {
            display: flex;
            justify-content: space-between;
          }
        }
        .hint {
          position: absolute;
          bottom: -20px;
          span {
            text-align: left;
            color: red;
            font-size: 12px;
          }
        }
        .confirm {
          display: flex;
          justify-content: start;
          /deep/ .el-button {
            width: 100%;
            height: 50px;
          }
        }
        .close {
          /deep/ .el-icon {
            position: absolute;
            right: -42px;
            top: -36px;
            font-size: 34px;
            color: #909399;
            cursor: pointer;
          }
        }
        .default {
          display: flex;
          justify-content: start;
        }
        .example-block {
          display: flex;
          justify-content: start;
          /deep/ .el-cascader {
            width: 100%;
            /deep/ input {
              height: 50px;
            }
          }
        }
      }
    }
  }
  //订单导航
  .bottom-main-header {
    padding: 45px 55px;
    ul {
      display: flex;
      height: 57px;
      background: #f6f6f6;
      align-items: center;
      justify-content: space-around;
      li {
        height: 100%;
        cursor: pointer;
        line-height: 57px;
        font-size: 18px;
        box-sizing: border-box;
      }
      .bottom-border {
        color: #000;
        border-bottom: 2px solid #000;
      }
    }
  }
  //订单内容
  .bottom-main-content {
    text-align: center;
    margin-top: 36px;
    padding-bottom: 58px;
    padding-right: 55px;
    padding-left: 55px;
    div {
      img {
        width: 138px;
        height: 138px;
        margin: 0 auto;
      }
      p {
        text-align: center;
      }
    }
  }
  //
  .orderForm {
    padding: 0px 55px 40px 55px;
    font-size: 16px;
    color: #000;
    ul {
      li:not(:first-child) {
        border-top: 3px solid #e0e0e0;
        margin-top: 45px;
        padding-top: 45px;
      }
    }
    .orderNumber {
      display: flex;
      justify-content: space-between;
      margin-bottom: 31px;
      span {
        font-size: 16px;
      }
      a {
        font-size: 16px;
        span {
          color: #0096d6;
        }
      }
    }
    .commodityFigure {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30px 0;
      border-top: 1px solid #e0e0e0;
      div {
        img {
          width: 74px;
          height: 80px;
          margin-left: 26px;
        }
        .commodityFigure-p {
          width: 212px;
        }
        .commodityFigure-fontSize {
          font-size: 16px;
        }
      }
    }
    .settleAccounts {
      padding-top: 28px;
      border-top: 1px solid #e0e0e0;
      display: flex;
      justify-content: space-between;
      div {
        span {
          margin-left: 10px;
          font-size: 22px;
          color: #0096d6;
        }
      }
      div:last-child {
        .el-button:first-child {
          margin-right: 18px;
        }
        .el-button {
          padding: 17px 32px;
          font-size: 14px;
          line-height: 0px;
        }
      }
    }
  }
}
</style>